import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useAppSelector } from '../store';
import { updateByIdAction, delByIdAction, toggleAllAction } from '../store/action/todo';
import { SelectType } from '../store/reducer/todo';

export default function Main() {
  // 1.1 在Main组件中获取list
  // 9.1 获取type 和 list
  const { list, type } = useAppSelector((state) => state.todo);

  // 12.1 监听数据变化
  useEffect(() => {
    console.log('type, list变化了，更新后的值  ----->  ', type, list);
    // 12.2 数据更新后的值，存入缓存中
    localStorage.setItem('todo-list', JSON.stringify(list));
    localStorage.setItem('todo-type', type);
  }, [list, type]);

  // 9.2 定义一个计算属性showList
  const showList = list.filter((item) => {
    // 当type为active时，返回isDone为false的数据，代表显示未完成
    if (type === SelectType.ACTIVE) return !item.isDone;
    // 当type为completed时，返回isDone为true的数据，代表显示已完成
    if (type === SelectType.COMPLETED) return item.isDone;

    // 当type为all时，返回true，代表显示全部数据
    return true;
  });

  // 10.1 定义一个计算属性isAll
  const isAll = list.length ? list.every((item) => item.isDone) : false;

  // 10.2 将isAll分配给全选的checked属性

  const dispatch = useDispatch();
  return (
    <section className="main">
      <input
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
        checked={isAll}
        // 11.4 dispatch触发aciton
        onChange={(e) => dispatch(toggleAllAction(e.target.checked))}
      />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {/* // 1.2 通过列表渲染，渲染任务列表 */}
        {/* 9.3 用showList渲染列 */}
        {showList.map((item) => {
          return (
            // 1.3 处理样式和选中
            <li className={item.isDone ? 'completed' : ''} key={item.id}>
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.isDone}
                  // 1.3 点击时，触发dispatch()
                  onChange={() => dispatch(updateByIdAction(item.id))}
                />
                <label>{item.task}</label>
                <button
                  className="destroy"
                  // 3.4 dispatch触发action
                  onClick={() => dispatch(delByIdAction(item.id))}
                ></button>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
